import React, { lazy, Suspense } from 'react'
import { Navigate, useRoutes } from 'react-router-dom'
import Layout from '@/common_components/layout'
import CorretExamList from '@/pages/corret_exam_list'
// import SubjectAdd from './pages/subject_add'
// import SubjectManage from './pages/subject_manage'
import StudentManage from '@/pages/student_manage'
import Login from '@/pages/login'
import ExamSelect from '@/pages/exam_select'
import ExamHistory from '@/pages/exam_history'
import AdminManage from '@/pages/admin_manage'
import PersonInfo from '@/pages/person_info'
import ReadExam from '@/pages/read_exam'
import CorretExam from '@/pages/corret_exam'
import Exam from '@/pages/exam'
import { MenuData } from '@/util/interface'
import { usePathKey } from '@/hooks/usePathKey'
import NotFound from '@/pages/404/NotFound'
import { RouterType } from './interface'
import MyNote from '@/pages/my_note'
import TodoList from '@/pages/todolist'
import SuperAdminHome from '@/pages/super_admin_home'
import Register from '@/pages/register'
import AIChat from '@/pages/ai_chat'

// 懒加载
const AsyncSubjectAdd = lazy(() => import('@/pages/subject_add'))
const AsyncSubjectManage = lazy(() => import('@/pages/subject_manage'))
// Suspense与lazy配合使用
function SubjectManage() {
  return (
    <Suspense fallback={'loading'}>
      <AsyncSubjectManage></AsyncSubjectManage>
    </Suspense>
  )
}

function SubjectAdd() {
  return (
    <Suspense fallback={'loading'}>
      <AsyncSubjectAdd></AsyncSubjectAdd>
    </Suspense>
  )
}
const component: any = {
  '/': <Navigate to={'/login'}></Navigate>,
  login: <Login></Login>,
  register: <Register></Register>,
  person_info: <PersonInfo></PersonInfo>,
  corret_exam_list: <CorretExamList></CorretExamList>,
  subject_add: <SubjectAdd></SubjectAdd>,
  subject_manage: <SubjectManage></SubjectManage>,
  student_manage: <StudentManage></StudentManage>,
  exam_select: <ExamSelect></ExamSelect>,
  exam_history: <ExamHistory></ExamHistory>,
  admin_manage: <AdminManage></AdminManage>,
  read_exam: <ReadExam></ReadExam>,
  corret_exam: <CorretExam></CorretExam>,
  exam: <Exam></Exam>,
  my_note: <MyNote></MyNote>,
  todolist: <TodoList></TodoList>,
  super_admin_home: <SuperAdminHome></SuperAdminHome>,
  ai_chat: <AIChat></AIChat>
}

// 静态路由
const commonRoute = [
  {
    path: '/',
    element: component['/']
  },
  {
    path: '/login',
    element: component.login
  },
  {
    path: '/register',
    element: component.register
  },
  {
    element: <Layout></Layout>,
    // 对应于 <Outlet></Outlet>
    // <Outlet /> 充当一个占位符，它会根据当前匹配的父路由和子路由，动态地渲染对应的子路由组件。
    children: [] as RouterType[]
  }
]

export default function WrapedRoutes() {
  // 路径参数
  const pathKey = usePathKey()
  // 应该使用深拷贝
  const allRoute = [...commonRoute]

  // 如果不是登录页,获取动态路由
  if (pathKey !== 'login') {
    let menu = JSON.parse(localStorage.getItem('menu')!)
    // 动态路由
    menu?.forEach((item: MenuData) => {
      // at(-1) 访问数组的最后一个元素
      allRoute.at(-1)?.children?.push({ path: item.path, element: component[item.key] })
    })

    // 添加任意路由
    allRoute.push({
      path: '*',
      element: <NotFound></NotFound>
    })
  }

  // useRoutes 接收一个路由配置对象作为参数，该对象描述了应用的路由结构。
  // 它会根据当前的 URL 路径匹配路由配置中的规则，并返回匹配的路由组件。如果没有匹配到任何路由，它会返回 null。
  return useRoutes(allRoute)
}
